<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
</head>
<style>
.header{
  height: 50px;
  background-color: aquamarine;
  position: fixed;
  top: 0;
  width: 100%;
}
.foot{
  width: 200px;
  height: 200px;
  background-color: gray;
  position: fixed;
  right: 0;
  bottom: 0;
}
span{
  font-size: 50px;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.container{
  margin-top: 50px;
}
</style>
<body>
    <div class="header"><span>导航</span></div>
    <div class="foot"><span>广告</span></div>
    <h1 class="container">11111111111</h1>
    <h1>22222222222</h1>
    <h1>33333333333</h1>
    <h1>44444444444</h1>
    <h1>55555555555</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
    <h1>66666666666</h1>
</body>
</html>